<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>标签页组件 - Layui</title>
    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
  </head>
  <body>
    <div class="layui-container layui-padding-3 layui-text">
      <h2>动态操作</h2>
      <div
        class="layui-tabs layui-hide-v"
        id="demoTabs1"
        lay-options="{closable: true, headerMode:'scroll'}"
      >
        <ul class="layui-tabs-header">
          <li lay-id="aaa" lay-closable="false">Tab1</li>
          <li lay-id="bbb">Tab2</li>
          <li lay-id="ccc">Tab3</li>
          <li lay-id="ddd">Tab4</li>
          <li lay-id="eee">Tab5</li>
          <li lay-id="fff">Tab6</li>
        </ul>
        <div class="layui-tabs-body">
          <div class="layui-tabs-item">Tab Content-1</div>
          <div class="layui-tabs-item">Tab Content-2</div>
          <div class="layui-tabs-item">Tab Content-3</div>
          <div class="layui-tabs-item">Tab Content-4</div>
          <div class="layui-tabs-item">Tab Content-5</div>
          <div class="layui-tabs-item">Tab Content-6</div>
        </div>
      </div>

      <div class="layui-btn-container">
        <button
          class="layui-btn"
          onclick="layui.tabs.change('demoTabs1', 'ccc')"
        >
          切换到：Tab3
        </button>
        <button class="layui-btn" onclick="layui.tabs.change('demoTabs1', 1)">
          切换到：第 2 项
        </button>
        <button
          class="layui-btn"
          onclick="layui.tabs.close('demoTabs1', 'ddd')"
        >
          关闭：Tab4
        </button>
        <button class="layui-btn" onclick="layui.tabs.close('demoTabs1', 1)">
          关闭：第 2 项
        </button>
        <button class="layui-btn" lay-on="add">添加 Tab</button>
      </div>

      <h2>方法渲染</h2>
      <div id="demoTabs2"></div>

      <h2>卡片风格</h2>
      <div class="layui-tabs layui-tabs-card" lay-options="{index: 1}">
        <ul class="layui-tabs-header">
          <li>标题1</li>
          <li>标题2</li>
          <li><a href="" target="_blank" class="layui-font-blue">跳转项</a></li>
          <li class="layui-disabled" lay-unselect>禁选项</li>
          <li>标题5</li>
          <li>标题6</li>
        </ul>
        <div class="layui-tabs-body">
          <div class="layui-tabs-item">内容-1</div>
          <div class="layui-tabs-item">内容-2</div>
          <div class="layui-tabs-item">内容-3</div>
          <div class="layui-tabs-item">内容-4</div>
          <div class="layui-tabs-item">内容-5</div>
          <div class="layui-tabs-item">内容-6</div>
        </div>
      </div>

      <h3>卡片 + 边框</h3>
      <div class="layui-tabs layui-tabs-card layui-panel layui-inline">
        <ul class="layui-tabs-header layui-bg-tint">
          <li class="layui-this">标题1</li>
          <li>标题2</li>
          <li>标题3</li>
          <li>标题4</li>
          <li>标题5</li>
          <li>标题6</li>
        </ul>
        <div class="layui-tabs-body">
          <div class="layui-tabs-item layui-show">
            <div class="layui-form">
              <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
              </select>
            </div>
          </div>
          <div class="layui-tabs-item">2</div>
          <div class="layui-tabs-item">3</div>
          <div class="layui-tabs-item">4</div>
          <div class="layui-tabs-item">5</div>
          <div class="layui-tabs-item">6</div>
        </div>
      </div>

      <h2>打乱标签顺序：</h2>
      <div class="layui-tabs" lay-options="{closable: true}">
        <ul class="layui-tabs-header">
          <li lay-id="fff">Tab6</li>
          <li lay-id="eee">Tab5</li>
          <li lay-id="ccc">Tab3</li>
          <li lay-id="bbb">Tab2</li>
          <li lay-id="aaa">Tab1</li>
          <li lay-id="ddd">Tab4</li>
        </ul>
        <div class="layui-tabs-body">
          <div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
          <div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
          <div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
          <div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
          <div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
          <div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
        </div>
      </div>

      <h2>标签 HASH 定位</h2>
      <div class="layui-tabs layui-hide-v" id="demoTabs-hash">
        <ul class="layui-tabs-header">
          <li lay-id="A1" class="layui-this">
            <a href="#A1">标题题题题题题1</a>
          </li>
          <li lay-id="A2"><a href="#A2">标题题题2</a></li>
          <li lay-id="A3"><a href="#A3">标题3</a></li>
          <li lay-id="A4"><a href="#A4">标题题题题题题题4</a></li>
          <li lay-id="A5"><a href="#A5">标题5</a></li>
          <li lay-id="A6"><a href="#A6">标题6</a></li>
          <li lay-id="A7"><a href="#A7">标题7</a></li>
          <li lay-id="A8"><a href="#A8">标题题题题题题题8</a></li>
        </ul>
      </div>

      <h2>标签嵌套</h2>
      <div
        class="layui-tabs layui-tabs-card"
        lay-options="{headerMode:'normal'}"
      >
        <ul class="layui-tabs-header">
          <li class="layui-this">标题1</li>
          <li>标题2</li>
          <li>标题3</li>
        </ul>
        <div class="layui-tabs-body" style="padding: 16px">
          <div class="layui-tabs-item layui-show">
            <div class="layui-tabs" lay-options="{headerMode:'normal'}">
              <ul class="layui-tabs-header">
                <li class="layui-this">标题 1-1</li>
                <li>标题 1-2</li>
              </ul>
              <div class="layui-tabs-body">
                <div class="layui-tabs-item layui-show">1-1</div>
                <div class="layui-tabs-item">1-2</div>
              </div>
            </div>
          </div>
          <div class="layui-tabs-item">
            <div class="layui-tabs" lay-options="{headerMode:'normal'}">
              <ul class="layui-tabs-header">
                <li class="layui-this">标题 2-1</li>
                <li>标题 2-2</li>
                <li>标题 2-3</li>
              </ul>
              <div class="layui-tabs-body">
                <div class="layui-tabs-item layui-show">2-1</div>
                <div class="layui-tabs-item">2-2</div>
                <div class="layui-tabs-item">2-3</div>
              </div>
            </div>
          </div>
          <div class="layui-tabs-item">3</div>
          <div class="layui-tabs-item">4</div>
          <div class="layui-tabs-item">5</div>
        </div>
      </div>

      <h2>给任意元素绑定 tabs 切换功能</h2>
      <div id="demoTabs3">
        <style>
          #demoTabsHeader .layui-btn.layui-this {
            border-color: #eee;
            color: #000;
            background: none;
          }
          #demoTabsBody .test-item {
            display: none;
          }
        </style>
        <div class="layui-btn-container" id="demoTabsHeader">
          <button class="layui-btn layui-this">标题 1</button>
          <button class="layui-btn">标题 2</button>
          <button class="layui-btn">标题 3</button>
        </div>
        <div class="layui-panel layui-padding-3" id="demoTabsBody">
          <div class="test-item layui-show">内容 111</div>
          <div class="test-item">内容 222</div>
          <div class="test-item">内容 333</div>
        </div>
      </div>
    </div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use(() => {
        var $ = layui.$;
        var tabs = layui.tabs;
        var util = layui.util;
        var layer = layui.layer;
        var dropdown = layui.dropdown;

        // 新增随机标签
        var addTabs = (opts) => {
          var n = (Math.random() * 1000) | 0; // 演示标记
          opts = $.extend(
            {
              title: 'New Tab ' + n, // 此处加 n 仅为演示区分，实际应用不需要
              content: 'New Tab Content ' + n,
              id: 'new-' + n,
              // active: false, // 是否设为活动标签
              done: (data) => {
                console.log(data); // 查看返回的参数

                // 为新标签头添加任意属性 --- 2.11.2+
                data.headerItem.attr('lay-tips', 'tip-' + n);

                // 给新标签头添加上下文菜单
                dropdown.render(
                  $.extend({}, dropdownInst.config, {
                    elem: data.headerItem, // 新标签头元素
                  }),
                );
              },
            },
            opts,
          );
          // 添加标签到最后
          tabs.add('demoTabs1', opts);
        };

        // 自定义事件
        util.on({
          add: () => {
            addTabs();
          },
        });

        // tabs 关闭前的事件
        tabs.on('beforeClose(demoTabs1)', function (data) {
          console.log('beforeClose', data);

          // 关闭确认提示
          layer.confirm(`确定关闭标签「${this.innerText}」吗？`, (i) => {
            tabs.close('demoTabs1', data.index, true); // 强制关闭对应的标签项
            layer.close(i); // 关闭确认框
          });
          return false; // 阻止标签默认关闭
        });

        // tabs 关闭后的事件
        tabs.on('afterClose(demoTabs1)', (data) => {
          console.log('afterClose', data);
        });

        // tabs 切换前的事件
        tabs.on('beforeChange(demoTabs1)', (data) => {
          console.log('beforeChange', data);

          // 切换确认提示
          /*layer.confirm(`确定从「当前标签」切换到标签「${this.innerText}」吗？`, function(i) {
        tabs.change('demoTabs1', data.to.index, true); // 强制切换
        layer.close(i); // 关闭确认框
      });
      return false; // 阻止标签默认关闭*/
        });

        // tabs 切换后的事件
        tabs.on('afterChange(demoTabs1)', (data) => {
          console.log('afterChange', data);
        });

        // 为标签头添加上下文菜单
        var dropdownInst = dropdown.render({
          elem: '#demoTabs1 .layui-tabs-header>li',
          trigger: 'contextmenu',
          data: [
            {
              title: '在右侧新增标签页',
              action: 'add',
              mode: 'after',
            },
            {
              type: '-',
            },
            {
              title: '关闭',
              action: 'close',
              mode: 'this',
            },
            {
              title: '关闭其他标签页',
              action: 'close',
              mode: 'other',
            },
            {
              title: '关闭右侧标签页',
              action: 'close',
              mode: 'right',
            },
            {
              title: '关闭所有标签页',
              action: 'close',
              mode: 'all',
            },
          ],
          click: function (data, othis, event) {
            var index = this.elem.index(); // 获取活动标签索引
            var layid = this.elem.attr('lay-id');

            // 新增标签操作
            if (data.action === 'add') {
              // 在当前活动标签右侧新增标签页
              addTabs({
                mode: data.mode,
                index: index,
              });
            } else if (data.action === 'close') {
              // 关闭标签操作
              if (data.mode === 'this') {
                tabs.close('demoTabs1', index); // 关闭当前标签
              } else {
                tabs.closeMult('demoTabs1', data.mode, index); // 批量关闭标签
              }
            }
          },
        });

        // 方法渲染
        tabs.render({
          elem: '#demoTabs2',
          header: [
            { title: 'Tab1', closable: false },
            { title: 'Tab2' },
            { title: 'Tab3' },
          ],
          body: [
            { content: 'Tab content 1' },
            { content: 'Tab content 2' },
            { content: 'Tab content 3' },
          ],
          // index: 1, // 初始选中项
          // className: 'layui-tabs-card',
          closable: true,
        });

        // HASH 初始定位
        var hash = layui.hash();
        tabs.change('demoTabs-hash', hash.href);

        // 给任意元素绑定 Tab 功能
        tabs.render({
          elem: '#demoTabs3',
          header: ['#demoTabsHeader', '>button'],
          body: ['#demoTabsBody', '>.test-item'],
        });
      });
    </script>
  </body>
</html>
